Eleventy 全局数据

Eleventy 中包含一个 Global Data 模块，用于保存全局可访问的数据。可在模板中直接使用。

全局数据存放于 src/_data 目录下，支持多种类型的数据（JSON、JS、YAML）。

举例来说（《Lesson 7: Data basics | Learn Eleventy From Scratch》中的示例，在全局数据目录下，创建一个 site.json：

{
  "name": "Issue 33",
  "url": "https://issue33.com"
}

在模板/Patrials 中，例如 src/_includes/partials/site-head.html（site-head.njk)：

<a href="/" aria-label="{{ site.name }} - home" class="site-head__brand">

其中，site.name，site 表示数据文件，name 表示其中的字段。

再来一个更复杂的案例，是导航栏的设计，首先创建导航路由的全局数据 navigation.json：

{
  "items": [
    {
      "text": "Home",
      "url": "/"
    },
    {
      "text": "About",
      "url": "/about-us/"
    },
  ]
}

在导航的 Partials 中：

<ul class="nav__list">
  {% for item in navigation.items %}
  <li>
    <a href="{{ item.url }}">{{ item.text }}</a>
  </li>
  {% endfor %}
</ul>

结合 Nunjucks 的循环语法，使用起来很方便。

除了静态资源之外，还可以通过向全局数据中添加 JS 文件，实现全局方法，例如，下面创建了 helpers.js，用于在导航栏中，进行高亮展示（注入 CSS 属性），helpers.js：

module.exports = {
  /**
   * Returns back some attributes based on whether the
   * link is active or a parent of an active item
   *
   * @param {String} itemUrl The link in question
   * @param {String} pageUrl The page context
   * @returns {String} The attributes or empty
   */
  getLinkActiveState(itemUrl, pageUrl) {
    let response = '';

    if (itemUrl === pageUrl) {
      response = ' aria-current="page"';
    }

    if (itemUrl.length > 1 && pageUrl.indexOf(itemUrl) === 0) {
      response += ' data-state="active"';
    }

    return response;
  }
};

修改 site-head.html 如下：

<ul class="nav__list">
  {% for item in navigation.items %}
  <li>
    <a href="{{ item.url }}" {{ helpers.getLinkActiveState(item.url, page.url) | safe }}
      >{{ item.text }}</a
    >
  </li>
  {% endfor %}
</ul>

其中：page.url 是系统自带的属性，表示当前页面的 URL。关于 Page 的文档参见这里。

网络资源

• Global Data Files — Eleventy
• Lesson 7: Data basics | Learn Eleventy From Scratch

本文作者：Maeiee

本文链接：Eleventy 全局数据

版权声明：如无特别声明，本文即为原创文章，版权归 Maeiee 所有，未经允许不得转载！

喜欢我文章的朋友请随缘打赏，鼓励我创作更多更好的作品！